<template>
    <div class="list">
      <header>
        <div class="filter-part">
          <div class="filter-item">
            <label>所属药店：</label>
            <i-select class="select" v-model.trim="filterObj.mechanismId" filterable :key="filterObj">
              <i-option v-for="item in cityList" :value="item.id" :key="item.id">{{ item.orgName }}</i-option>
            </i-select>
          </div>
          <div class="filter-item">
            <label>处方号：</label>
            <i-input class="input" v-model.trim="filterObj.rxId" placeholder="请输入处方号"></i-input>
          </div>
          <div class="filter-item">
            <label>客户姓名：</label>
            <i-input class="input" v-model.trim="filterObj.name" placeholder="请输入客户姓名"></i-input>
          </div>
          <div class="filter-item">
            <label>订单号：</label>
            <i-input class="input" v-model.trim="filterObj.orderNumber" placeholder="请输入订单号"></i-input>
          </div>
          <div class="filter-item">
            <label>配送类型：</label>
            <i-select class="select" style="width: 220px;" v-model.trim="filterObj.takeMedicineType" :key="filterObj">
              <i-option :value="null">全部</i-option>
              <i-option :value="0">药店自取</i-option>
              <i-option :value="1">物流配送</i-option>
            </i-select>
          </div>
        <!-- </div>
        <div class="filter-part"> -->
          <div class="filter-item">
            <label>处方状态：</label>
            <i-select class="select" v-model.trim="filterObj.distributionStatus" :key="filterObj">
              <i-option :value="null">全部</i-option>
              <i-option :value="6">待发货</i-option>
              <i-option :value="7">待收货</i-option>
              <i-option :value="8">已完成</i-option>
              <i-option :value="9">待退款</i-option>
              <i-option :value="11">已退款</i-option>
            </i-select>
          </div>
          <div class="filter-item">
            <label>日期：</label>
            <DatePicker
              type="date"
              :clearable="false"
              v-model="filterObj.minData"
              placeholder="开始日期"
              format="yyyy-MM-dd"
              style="width: 130px"
            ></DatePicker>
            <span style="margin-top: 5px;padding: 0 5px 0 5px">至</span>
            <DatePicker
              type="date"
              :clearable="false"
              v-model="filterObj.maxData"
              placeholder="结束日期"
              format="yyyy-MM-dd"
              style="width: 130px"
            ></DatePicker>
          </div>
          <div class="filter-btn-group" style="margin-left:10px">
            <i-button type="primary"  icon="ios-search"  @click="handleSearch">查询</i-button>
            <i-button @click="handleReset('forms')" icon="icon-gengxin">
              <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>重置
            </i-button>
          </div>
        </div>
      </header>
      <!-- 列表 -->
      <div class="table">
        <Table
          size="small"
          :columns="columns"
          :data="data1"
          @on-selection-change="selectChange"
          :loading="loading"
          no-data-text="未查询到符合条件的记录"
          border
          stripe
        >
        </Table>
        <div class="page-wrapper">
          <div class="des">
            显示第{{filterObj.row * (filterObj.page - 1) + 1}}到第{{filterObj.row * filterObj.page}}条记录，总共{{count}}条记录 每页显示
            <i-select class="select" v-model.trim="filterObj.row" placeholder="请输入在用状态">
              <i-option :value="10">10</i-option>
              <i-option :value="20">20</i-option>
              <i-option :value="50">50</i-option>
            </i-select>条记录
          </div>
          <Page
            :total="count"
            :current="filterObj.page"
            :page-size="filterObj.row"
            @on-change="loadPage"
            class="pages"
          />
        </div>
      </div>
    </div>
</template>

<script>
const filterObj = {
  row: 10,
  page: 1,
  minData: null,
  maxData: null
};
import api from "@/api/commonApi";
import { DatePicker } from "view-design";
import Utils from "@/utils";
export default {
  name: 'list',
  components: {
    DatePicker
  },
  created () {
    let breadList = [
      {path: "/index", title: "首页"},
      {
        path: "",
        title: "处方管理"
      },
      {
        path: "/index/operation/prescriptionmanage/organizationorder/list",
        title: "药企处方药店订单查询"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  data () {
    return {
      cityList: [],
      count: 0,
      loading: false,
      columns: [
        { type: "index", title: "排序", width: 60, align: "center" },
        { title: "订单号", key: "orderNumber", align: "center" },
        { title: "处方号", key: "rxId", align: "center" },
        { title: "客户姓名", key: "name", align: "center" },
        { title: "订单金额", key: "amt", align: "center" },
        {
          title: "支付方式",
          key: "tradingChannels",
          align: "center",
          render: (h, params) => {
            return '微信支付';
          }
        },
        { title: "支付时间", key: "notifyTime", align: "center" },
        {
          title: "配送类型",
          key: "distributionType",
          align: "center",
          render: (h, params) => {
            let status = params.row.distributionType;
            return ['物流配送', '药店自取'][parseInt(status)]
          }
        },
        {
          title: "订单状态",
          key: "distributionStatus",
          align: "center",
          render: (h, params) => {
            let status = params.row.distributionStatus;
            switch (parseInt(status)) {
              case 1:
                return '驳回 '
              case 2:
                return '待审核'
              case 3:
                return '待复审'
              case 4:
                return '待支付'
              case 5:
                return '待取药'
              case 6:
                return '待配送'
              case 7:
                return '待收货'
              case 8:
                return '已完成'
              case 9:
                return '已作废'
              case 10:
                return '无效处方'
              case 11:
                return '已退费'
              case 12:
                return '审核中'
              default:
                return '超时未支付'
            }
          }
        },
        { title: "所属药店", key: "hospitalName", align: "center" },
        {
          title: "操作",
          key: "iOperate",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    margin: "0px 6px"
                  },
                  on: {
                    click: () => {
                      this.handleDetail(params);
                    }
                  }
                },
                "查看详情 "
              )
            ]);
          }
        }
      ],
      filterObj: this.deepClone(filterObj)
    }
  },
  mounted() {
    this.prescriptionSearchPage()
  },
  methods: {
    handleDetail(record) {
      // 查看详情
      // let reqData = {
      //   "examineId": record.row.id
      // }
      // this.$axios.post(api.enteDetails, reqData).then((res) => {
      //   console.log(res)
      // })
      if (record.row.distributionStatus === 0 || record.row.distributionStatus === 1 || record.row.distributionStatus === 2 || record.row.distributionStatus === 3) {
        return this.$Message.error("无订单详情");
      }
      console.log(record.row)
      if (record.row.distributionType === 0) {
        this.functionJS.queryNavgationTo(this, "/index/operation/prescriptionmanage/ordersearch/logistics/" + record.row.id);
      } else {
        this.functionJS.queryNavgationTo(this, "/index/operation/prescriptionmanage/ordersearch/review/" + record.row.id);
      }
    },
    handleSearch() {
      // 搜索
      this.filterObj.page = 1;
      this.prescriptionSearchPage()
    },
    prescriptionSearchPage() {
        this.ishandlehome()
        this.$axios.post(api.entehospitalList,{}).then(res => {
          if (res.data.code === 1) {
            let ret = res.data.object;
            this.cityList = ret;
            this.count =  this.cityList.count
          } else {
            this.$Message.error(res.data.message);
          }
        }).catch(() => {
        });
    },
    handleReset() {
      // 重置
      this.filterObj = this.deepClone(filterObj);
      this.prescriptionSearchPage();
    },
    ishandlehome() {
      const reqData = this.deepClone(this.filterObj);
      reqData.minData =  Utils.getNowDateBySpecialFormat(this.filterObj.minData);
      reqData.maxData =  Utils.getNowDateBySpecialFormat(this.filterObj.maxData);
      this.$axios.post(api.enteOrderPage,reqData).then(res => {
          if (res.data.code === 1) {
              let ret = res.data.object.list;
              this.data1 = ret;
              this.count =  this.cityList.count
          } else {
            this.$Message.error(res.data.message);
          }
        }).catch(() => {
        });
    },
    ishospitalList() {
      return this.$axios.post(api.entehospitalList)
    },
    deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
      this.ordersSearchPage();
    }
  }
};
</script>

<style lang="less" scoped>
  .list{
    width: 98%;
    min-width: 1200px;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    header {
      width: 100%;
      .filter-part {
        display: flex;
        flex-wrap: wrap;
        .filter-item {
          display: flex;
          margin: 10px 0;
          label {
            white-space: nowrap;
            line-height: 32px;
            width: 84px;
            text-align: right;
          }
          .input {
            width: 220px;
          }
          .select {
            width: 220px;
          }
        }
        .filter-btn-group {
          margin: 10px 10px 10px 0;
          flex: 0 0 auto;
        }
      }
      .fun-part {
        margin-top: 15px;
        margin-bottom: 10px;
        a {
          vertical-align: bottom;
        }
      }
    }
    .table {
      margin-top: 20px;
      .page-wrapper {
        display: flex;
        // margin-top: 20px;
        justify-content: space-between;
        .des {
          display: flex;
          align-items: center;
          .select {
            width: 50px;
          }
        }
        .pages {
        }
      }
    }
  }
</style>
